<template>
	<div>
		<!--头部导航-->
		<div class="title">
			<ul>
				<li @click="click">
					<a>单曲</a>
				</li>
				
				<li @click="click2">
					<a>电台节目</a>
				</li>
				
				<li @click="click3">
					<a>视频</a>
				</li>
				
				<li @click="click4">
					<a>下载中</a>
				</li>
			</ul>
		</div>
		<!--选项卡-->
		<div class="xxk_1">
			<!--播放歌曲-->
			<div class="body">
				<div class="body_bott">
					<div class="player">
						<div class="imgs">
							<img src="../../../assets/img/play.png"/>
						</div>
						<div class="tex">
							<p>播放全部<span>(共20首)</span></p>
						</div>
					</div>
					<div class="menu">
						<div class="menu_img">
							<img src="../../../assets/img/menu.png"/>
						</div>
						<div class="menu_text">
							<p>多选</p>
						</div>
					</div>
				</div>
			</div>
			<!--歌单-->
			<div class="song">
				<div class="songimg">
					<div class="songimg_lef">
						<p class="top">
							<a>皇帝的新衣(Skr)</a>
						</p>
						<div class="bott">
							<div class="bott_img">
								<img src="../../../assets/img/yes.png"/>
							</div>
							<div class="bott_img">
								<img src="../../../assets/img/HQ.png"/>
							</div>
							<p class="bott_introduce">
								AR(刘夫阳)&nbsp;-皇帝的新衣(Skr)
							</p>
						</div>
					</div>
					<div class="songimg_rig">
						<div class="play">
							<img src="../../../assets/img/playTwo.png"/>
						</div>
						<div class="tiree">
							<img src="../../../assets/img/three.png"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="xxk_1">
		</div>
	</div>
</template>

<script>
	export default{
		data:function(){
			return{
				xxk_1:"xxk_1",
				xxko:"",
				li:""
			}
		},
		methods:{
			xxkone(xxk){
				var xxko = document.getElementsByClassName("xxk_1");
				this.xxko=xxko;
				xxko[1].style.display = "none";
				xxko[0].style.display = "block";
			},
			click(){
				this.xxko[0].style.display = "block";
				this.xxko[1].style.display = "none";
				var li = document.querySelectorAll("li");
				li[0].classList.add("active");
				li[1].classList.remove("active");
				li[2].classList.remove("active");
				li[3].classList.remove("active");
			},
			click2(){
				this.xxko[0].style.display = "none";
				this.xxko[1].style.display = "block";
				var li = document.querySelectorAll("li");
				li[1].classList.add("active");
				li[0].classList.remove("active");
				li[2].classList.remove("active");
				li[3].classList.remove("active");
			},
			click3(){
				this.xxko[0].style.display = "none";
				this.xxko[1].style.display = "block";
				var li = document.querySelectorAll("li");
				li[2].classList.add("active");
				li[0].classList.remove("active");
				li[1].classList.remove("active");
				li[3].classList.remove("active");
			},
			click4(){
				this.xxko[0].style.display = "none";
				this.xxko[1].style.display = "block";
				var li = document.querySelectorAll("li");
				li[3].classList.add("active");
				li[1].classList.remove("active");
				li[2].classList.remove("active");
				li[0].classList.remove("active");
			}
		},
		mounted(){
			this.xxkone(this.xxk_1);
			var li = document.querySelectorAll("li");
			li[0].classList.add("active");
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.title{
		width: 100%;
		height: 50px;
		background-color: #313639;
		display: flex;
		justify-content: space-around;
		ul{
			width: 100%;
			display: flex;
			align-self: flex-end;
			justify-content: space-around;
			margin-bottom: 10px;
			li{
				float: left;
				a{
					color: #CCCCCC;
				}
			}
			.active{
				/*text-decoration: underline;*/
				border-bottom: 3px solid white;
				padding-bottom: 5px;
				color: white;
			}
		}
	}
	.body{
		.body_bott{
			display: flex;
			justify-content: space-between;
			width: 100%;
			border-bottom: 1px solid #f3f3f3;
			.player{
				width: 40%;
				height: 60px;
				display: flex;
				justify-content: space-between;
				margin-left:20px;
				.imgs{
					align-self: center;
					height:25px;
					width:25px;
					img{
						width: 100%;
					}
				}
				.tex{
					align-self: center;
					span{
						color: #999;
					}
				}
			}
			.menu{
				display: flex;
				align-items: center;
				.menu_img{
					width: 20px;
					height: 20px;
					margin-right:5px;
					img{
						width: 100%;
						margin-right: 10px;
					}
				}
				.menu_text{
					margin-right: 20px;
					line-height: 20px;
				}
			}
		}
	}
	.song{
		.songimg{
			position: relative;
			width: 95%;
			height: 60px;
			float: right;
			border-bottom: 1px solid #f3f3f3;
			display: flex;
			align-content: space-around;
			.songimg_lef{
				float:left;
				.top{
					margin-top: 5px;
					width: 100%;
					a{						
						float: left;
					}
				}
				.bott{
					float: left;
						margin-top: 5px;
					.bott_img{
						float: left;
						width:13px;
						height:13px;
						margin-right:5px;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.bott_introduce{
						float: left;
						font-size: 13px;
						color: #999999;
						line-height: 13px;
					}
				}
			}
			.songimg_rig{
				width: auto;
				position: absolute;
				top: 50%;
				right: 70px;
				transform: translateY(-50%);
				.play{
					width: 30px;
					height: 30px;
					img{
						width: 100%;
					}
				}
				.tiree{
					position: absolute;
					right: -40px;
					top: 3px;
					width: 25px;
					height: 25px;
					img{
						width: 100%;
						transform: rotate(90deg);
					}
				}
			}
		}
	}
</style>